<template>
  <view>
    <view v-if="isCanUse">
      <view>
        <view class="header">
          <image :src="$img('/static/img2/cc188.png')"></image>
        </view>
        <view class="content">
          <view>申请获取以下权限</view>
          <text>获得你的公开信息(昵称，头像、地区等)</text>
        </view>

        <view @click="isAgree = !isAgree" class="agree">
          <view class="icon">
            <image v-if="isAgree" :src="$img('/static/img2/cc44.png')" lazy-load></image>

            <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
          </view>

          <view class="agree-r">
            我已阅读并同意
            <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">《用户协议》</text>
            和
            <text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">《隐私政策》</text>
          </view>
        </view>

        <view class="btn-list">
          <view
            @click="$c.to({ type: 3, url: '/pages/shouye/index' })"
            class="cancel c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc148.png')})`
            }"
          >
            拒绝
          </view>

          <view
            class="btn-item relative c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc53.png')})`
            }"
          >
            <button
              v-if="isAgree"
              class="hide"
              type="primary"
              withCredentials="true"
              lang="zh_CN"
              @click="getUserProfile"
            ></button>

            <button
              v-else
              class="hide"
              type="primary"
              withCredentials="true"
              lang="zh_CN"
              @click="getUserProfile"
            ></button>

            授权登录
          </view>
        </view>

        <!-- <button
          class="bottom"
          withCredentials="true"
          lang="zh_CN"
          @tap="getUserProfile"
        >
          授权登录
        </button> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2,
      SessionKey: '',
      OpenId: '',
      nickName: null,
      avatarUrl: null,
      isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
      code: '',
      isAgree: false
    }
  },
  onLoad() {
    //默认加载
    // this.login();
  },
  methods: {
    //第一授权获取用户信息===》按钮触发
    getUserProfile(e) {
      if (!this.isAgree) {
        return this.$c.toast({
          title: '请阅读并同意《用户协议》和《隐私政策》'
        })
      }

      var that = this
      uni.getUserProfile({
        desc: '用于向用户发送商品', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        lang: 'zh_CN',
        success: res => {
          uni.login({
            provider: 'weixin',
            success: function (loginRes) {
              // console.log(loginRes.code)
              // return

              that.req({
                url: 'login',
                data: {
                  code: loginRes.code,
                  nickname: res.userInfo.nickName,
                  headimg: res.userInfo.avatarUrl,
                  pid: uni.getStorageSync('pid')
                },
                success: function (res) {
                  if (res.status == 1) {
                    uni.setStorageSync('token', res.data)
                    var lgurl = uni.getStorageSync('lgurl') //获取页面路径
                    var lgdata = uni.getStorageSync('lgurldata') //获取页面参数
                    if (lgurl) {
                      lgdata = JSON.parse(lgdata)
                      // 拼接参数
                      let param = ''
                      for (let key in lgdata) {
                        param += '&' + key + '=' + lgdata[key]
                      }
                      param = '/' + lgurl + param.replace('&', '?')
                      uni.setStorageSync('lgurl', '')
                      uni.setStorageSync('lgurldata', '')
                      console.log(param)
                      setTimeout(() => {
                        uni.reLaunch({
                          url: param
                        })
                      }, 1000)
                    } else {
                      uni.reLaunch({
                        url: 'index'
                      })
                    }
                  }
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #333;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
  color: #fff;
}

.content text {
  display: block;
  margin-top: 40rpx;
}

.agree {
  display: flex;
  padding: 0 50rpx;

  .icon {
    width: 32rpx;
    height: 32rpx;
  }

  .agree-r {
    flex: 1;
    word-wrap: break-word;
    word-break: break-all;
    padding-left: 20rpx;
    line-height: 32rpx;

    font-size: 26rpx;
    color: #9d9d9d;

    text {
      color: #e40d1d;
    }
  }
}

.btn-list {
  display: flex;
  justify-content: space-evenly;
  padding: 50rpx 0 0;

  .cancel {
    width: 220rpx;
    height: 76rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: grayscale(1);

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000;
  }

  .btn-item {
    position: relative;
    margin: 0;
    width: 220rpx;
    height: 76rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000;
  }
}
</style>
